<!--
 * @FileDescription: 经费认领顶部，经费信息展示组件
 * @Author: gushouchen
 * @Date: 2021-10-18
 -->
<template>
  <!-- S 外层容器 -->
  <div class="cwIncome-Panel-wrap">
    <div class="cwIncome-content">
      <div>
        <span class="income-name">{{claimInfo.note}}</span>
        <span class="income-date">{{claimInfo.incomeDate}}</span>
      </div>
      <div>
        <span class="income-fee">{{claimInfo.feeValue}}</span>
        <span class="fee-unit">万元</span>
      </div>
      <div class="income-company">
        来款单位：{{claimInfo.incomeUnit}}
      </div>
    </div>
    <div class="cwIncome-percent-panel">
      <van-circle v-model:current-rate="claimAnalyzeState.currentRate"
                  :rate="computeRate"
                  :stroke-width="60"
                  size="2.5rem"
                  layer-color="#8CABF9"
                  speed="80"
                  :color="claimAnalyzeState.gradientColor"
                  stroke-linecap="butt"
                  :clockwise="false">
        <div class="van-circle__text">
          <div class="vct__current-rate">{{claimInfo.notClaimFee}}</div>
          <div class="vct__description">可认金额(万元)</div>
        </div>
      </van-circle>
    </div>
  </div>
  <!-- E 外层容器 -->
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  props: {
    claimInfo: {
      type: Object,
      required: true
    }
  },
  setup (props) {
    // 认领数据分析状态
    const claimAnalyzeState = reactive({
      // 当前进度
      currentRate: 0,
      // 进度条颜色
      gradientColor: {
        '0%': 'white',
      }
    })
    const computeRate = computed(() => {
      return props.claimInfo.notClaimFee / props.claimInfo.feeValue * 100
    })
    return {
      claimAnalyzeState,
      computeRate
    }
  }
}
</script>

<style scoped>
.cwIncome-Panel-wrap {
  display: flex;
  justify-content: space-between;
  height: 125px;
  background: #4073f5;
  color: #fff;
}

.cwIncome-content {
  padding: 20px 0 12px 20px;
}

.cwIncome-percent-panel {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 20px;
}
.income-name {
  font-size: 14px;
  letter-spacing: 3px;
}
.income-date {
  background-color: #4052f5;
  padding: 2px;
  margin-left: 5px;
  font-size: 12px;
  letter-spacing: 1px;
}

.income-fee {
  font-weight: bold;
  font-size: 26px;
  margin: 0 6px 0 0;
}

.fee-unit {
  padding-top: 10px;
}

.income-company {
  margin-top: 12px;
  color: #8caaf9;
}
.van-circle__text {
  color: #fff;
}
.vct__current-rate {
  font-weight: bold;
  font-size: 26px;
}
.vct__description {
  margin-top: 5px;
  font-size: 10px;
}
</style>
<!-- 
进度条参数说明：
v-model:current-rate	当前进度	number	-
rate	目标进度	number | string	100
size	圆环直径，默认单位为 px	number | string	100px
color	进度条颜色，传入对象格式可以定义渐变色	string | object	#1989fa
layer-color	轨道颜色	string	white
fill	填充颜色	string	none
speed	动画速度（单位为 rate/s）	number | string	0
text	文字	string	-
stroke-width	进度条宽度	number | string	40
stroke-linecap	进度条端点的形状，可选值为 square butt	string	round
clockwise	是否顺时针增加	boolean	true
start-position v3.2.1	进度起始位置，可选值为 left、right、bottom	CircleStartPosition	top
-->